<template>
        <div class="addposter">
                <h3>新增海报</h3>
                <el-form  :model="params" ref="ruleForm" class="demo-form-inline" label-width="120px" :rules="rules">
                        <el-form-item label="小程序：" prop="endFlag">
                                <el-select v-model="params.endFlag" >
                                        <el-option v-for="item in minPros" :key="item.label" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="城市：" prop="cityId" >
                                <el-select v-model="params.cityId" filterable clearable @change="loadDevelop" >
                                        <el-option v-for="item in citys" :key="item.cityId" :label="item.cityName" :value="item.cityId"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="开发商：" prop="devCompany">
                                <el-select v-model="params.devCompany" filterable clearable  @change="loadProject">
                                        <el-option v-for="item in develops" :key="item.index" :label="item.companyName" :value="item.companyName"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="位置序号：" prop="sequence">
                               <el-input v-model="params.sequence" style="width:217px" placeholder="请输入位置序号"></el-input>
                        </el-form-item>
                        <!-- <hr style="margin:30px;"/> -->
                        <el-form-item label="项目名称：" prop="projectId">
                                <el-select v-model="params.projectId" filterable clearable @change="loadDev">
                                        <el-option v-for="(item,index) in projects" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="楼盘名称：" prop="devId">
                                <el-select v-model="params.devId" filterable clearable @change="getDev">
                                        <el-option v-for="(item,index) in devs" :key="index" :label="item.devName" :value="item.devId"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="海报图片：" class="posterurl">
                                <uploadImg @uploadSuccess="uploadSuccess" style="margin-top:20px;"></uploadImg>
                                <p>数量限制为1,格式为jpg/png,大小1M以内,建议1324px*1788px</p>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="save">保存</el-button>
                                <el-button type="primary" @click="cancel">取消</el-button>
                        </el-form-item>
                </el-form>
        </div>
</template>

<script>
import uploadImg from "./uploadImg"
import api from '@/api/apiPath'
export default {
        data(){
                return {
                        minPros:[
                                {label:"珠江小程序",value:1},
                                {label:"合生小程序",value:2}
                        ],
                        develops:[],
                        citys:[],
                        projects:[],
                        devs:[],
                        params:{
                                id:"",
                                endFlag:"",
                                devCompany:"",
                                devName:"",
                                cityId:"",
                                cityName:"",
                                sequence:"",
                                projectId:"",
                                projectName:"",
                                devId:"",
                                posterUrl:""
                        },
                        rules:{
                                name:[
                                        {
                                                required: true,
                                                validator: (rule, value, callback) => {
                                                        if (!value) {
                                                                return callback(new Error('请输入课程名称'));
                                                        }
                                                        if(value.length>25){
                                                                return callback(new Error('课程名称长度不能大于25'));
                                                        }
                                                        callback();
                                                }
                                        }
                                ],
                                endFlag:[
                                        {required: true,message: '请选择小程序', trigger: 'change'}
                                ],
                                devCompany:[
                                        {required: true,message: '请选择开发商', trigger: 'change'}
                                ],
                                cityId:[
                                        {required: true,message: '请选择城市', trigger: 'change'}
                                ],
                                sequence:[
                                        {
                                                required: true,
                                                validator: (rule, value, callback) => {
                                                    if (!value) {
                                                        return callback(new Error('请输入位置序号'));
                                                    }
                                                    if (parseFloat(value) < 0) {
                                                        return callback(new Error('位置序号不能为负数'));
                                                    }
                                                    if (parseFloat(value) == 0) {
                                                        return callback(new Error('位置序号不能为0'));
                                                    }
                                                    if (parseFloat(value) > 9999) {
                                                        return callback(new Error('最多支持四位数'));
                                                    }
                                                    let reg = /^[0-9]*$/;
                                                    if (!reg.test(value)) {
                                                        return callback(new Error('限正整数'));
                                                    }
                                                    callback();
                                                }
                                        }
                                ],
                                projectId:[
                                        {required: true,message: '请选择项目名称', trigger: 'change'}
                                ],
                                devId:[
                                        {required: true,message: '请选择楼盘名称', trigger: 'change'}
                                ]
                        }
                }
        },
        methods:{
                uploadSuccess(res){
                        this.params.posterUrl=res;
                },
                loadCity(){
                        this.axios.post(api.APPOSTERCAP,{"cityId":"","devCompany":""}).then((res)=>{
                                if(res.data.code==200){
                                        this.citys=res.data.data;
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                loadDevelop(val){
                        this.params.devCompany="";
                        this.params.projectId="";
                        this.params.projectName="";
                        this.params.devId="";
                        this.params.devName=""
                        let obj={};
                        this.axios.post(api.APPOSTERCAP,{"cityId":this.params.cityId,"devCompany":""}).then((res)=>{
                                if(res.data.code==200){
                                        this.develops=res.data.data;
                                        obj = this.citys.find((item)=>{
                                            return item.cityId === val;
                                        });
                                        this.params.cityName=obj.cityName;
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                loadProject(val){
                        this.params.projectId="";
                        this.params.projectName="";
                        this.params.devId="";
                        this.params.devName=""
                        let obj={};
                        this.axios.post(api.APPOSTERCAP,{"cityId":this.params.cityId,"devCompany":this.params.devCompany}).then((res)=>{
                                if(res.data.code==200){
                                        this.projects=res.data.data;
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                loadDev(val){
                        this.params.devId="";
                        this.params.devName=""
                        let obj={};
                        this.axios.post(api.APPOSTERCAP,{"cityId":this.params.cityId,"devCompany":this.params.devCompany,"projectId":this.params.projectId}).then((res)=>{
                                if(res.data.code==200){
                                        this.devs=res.data.data;
                                        obj = this.projects.find((item)=>{
                                            return item.projectId === val;
                                        });
                                        this.params.projectName=obj.projectName;
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                // getPrp(val){
                //         let obj={};
                //         obj = this.projects.find((item)=>{
                //             return item.projectId === val;
                //         });
                //         this.params.projectName=obj.projectName;
                // },
                getDev(val){
                        let obj={};
                        obj = this.devs.find((item)=>{
                            return item.devId === val;
                        });
                        this.params.devName=obj.devName;
                },
                save(){
                        this.$refs.ruleForm.validate((valid)=>{
                                if(!valid){
                                        return
                                }
                                if(this.params.posterUrl==""){
                                        this.$alert("请上传海报图片", '提示', {
                                                type: 'error',
                                                confirmButtonText: '确定',
                                                callback: action => {
                                                 }
                                        });
                                        return
                                }
                                this.axios.post(api.AAUPOPSTER,this.params).then((res)=>{
                                        if(res.data.code==200){
                                                this.$alert("新增成功", '提示', {
                                                        type: 'success',
                                                        confirmButtonText: '确定',
                                                        callback: action => {
                                                             this.$router.push({path:"/postermanage"})
                                                         }
                                                });
                                        }
                                }).catch((error)=>{
                                        console.log(error)
                                })
                        })
                },
                cancel(){
                        this.$router.push({
                                path:"./postermanage"
                        })
                }
        },
        mounted(){
                this.loadCity();
        },
        components:{
            uploadImg
        }
}
</script>

<style lang="stylus" >
        .posterurl .el-form-item__label:before{
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }
</style>
